//button background
.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open .dropdown-toggle& {
    color: @color;
    // background-color: darken(@background, 8%);
    	background-color: @background;
        border-color: darken(@border, 12%);
  }
  &:active,
  &.active,
  .open .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: lighten(@background, 8%);
          border-color: @border
    }
  }
}
.datepicker {
	padding: 4px;
	.border-radius(0px);
	&-inline {
		width: 280px;
	}
	direction: ltr;
	&&-rtl {
		direction: rtl;
		table tr td span {
			float: right;
		}
	}
	&-dropdown {
		top: 0;
		left: 0;
		/*&:before {
			content: '';
			display: inline-block;
			border-left:   7px solid transparent;
			border-right:  7px solid transparent;
			border-bottom: 7px solid #ccc;
			border-top:    0;
			border-bottom-color: rgba(0,0,0,.2);
			position: absolute;
		}
		&:after {
			content: '';
			display: inline-block;
			border-left:   6px solid transparent;
			border-right:  6px solid transparent;
			border-bottom: 6px solid @white;
			border-top:    0;
			position: absolute;
		}
		&.datepicker-orient-left:before   { left: 6px; }
		&.datepicker-orient-left:after    { left: 7px; }
		&.datepicker-orient-right:before  { right: 6px; }
		&.datepicker-orient-right:after   { right: 7px; }
		&.datepicker-orient-top:before    { top: -7px; }
		&.datepicker-orient-top:after     { top: -6px; }
		&.datepicker-orient-bottom:before {
			bottom: -7px;
			border-bottom: 0;
			border-top:    7px solid #999;
		}
		&.datepicker-orient-bottom:after {
			bottom: -6px;
			border-bottom: 0;
			border-top:    6px solid @white;
		}*/
	}
	>div {
		display: none;
	}
	&.days div.datepicker-days {
		display: block;
	}
	&.months div.datepicker-months {
		display: block;
	}
	&.years div.datepicker-years {
		display: block;
	}
	table{
		margin: 0;
		border-spacing: 0;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	td,
	th{
		text-align: center;
		width: 38px;
		height: 28px;
		line-height: 28px;
	}
	/*td{
		.border-radius(50%);
	}
	th{
		.border-radius(4px);
	}*/
	// Inline display inside a table presents some problems with
	// border and background colors.
	.table-striped & table tr {
		td, th {
			background-color:transparent;
		}
	}
	table tr td {
		&.day:hover, &.day.focused {
			background: @grayLighter;
			cursor: pointer;
		}
		&.old,
		&.new {
			color: @grayLight;
		}
		&.disabled,
		&.disabled:hover {
			background: none;
			color: @grayLight;
			cursor: default;
		}
		&.today,
		&.today:hover,
		&.today.disabled,
		&.today.disabled:hover {
			/*@todayBackground: lighten(@orange, 30%);
			.button-variant(#000,@todayBackground, spin(@todayBackground, 20));*/
			color: @orange;
		}
		&.today:hover:hover { // Thank bootstrap 2.0 for this selector...
			// TODO: Bump min BS to 2.1, use @textColor in buttonBackground above
			color: @orange;
		}
		&.today.active:hover {
			color: @orange;
		}
		&.range,
		&.range:hover,
		&.range.disabled,
		&.range.disabled:hover {
			background:@grayLighter;
			.border-radius(0);
		}
		&.range.today,
		&.range.today:hover,
		&.range.today.disabled,
		&.range.today.disabled:hover {
			/*@todayBackground: mix(@orange, @grayLighter, 50%);
			.button-variant(#000,@todayBackground, spin(@todayBackground, 20));
			.border-radius(0);*/
			color: @orange;
		}
		&.selected,
		&.selected:hover,
		&.selected.disabled,
		&.selected.disabled:hover {
			.button-variant(#fff,lighten(@grayLight, 10), darken(@grayLight, 10));
			color: #fff;
			text-shadow: 0 -1px 0 rgba(0,0,0,.25);
		}
		&.active,
		&.active:hover,
		&.active.disabled,
		&.active.disabled:hover {
			.button-variant(#fff,@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
			color: #fff;
			text-shadow: 0 -1px 0 rgba(0,0,0,.25);
		}
		span {
			display: block;
			width: 23%;
			height: 54px;
			line-height: 54px;
			float: left;
			margin: 1%;
			cursor: pointer;
			.border-radius(0px);
			&:hover {
				background: @grayLighter;
			}
			&.disabled,
			&.disabled:hover {
				background:none;
				color: @grayLight;
				cursor: default;
			}
			&.active,
			&.active:hover,
			&.active.disabled,
			&.active.disabled:hover {
				.button-variant(#fff,@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
				color: #fff;
				text-shadow: 0 -1px 0 rgba(0,0,0,.25);
			}
			&.old,
			&.new {
				color: @grayLight;
			}
		}
	}

	th.datepicker-switch {
		width: 145px;
		//add for wangqi
		font-size: 18px;
		height: 38px;
		font-weight: 600;
		height: 38px;
	}
	//add for wangqi
	.prev,.next{
		b{
			display: block;
			width: 0;
			height: 0;
			line-height: 0;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-left: 8px solid #bcbcbc;
			border-right: 8px solid #bcbcbc;
		}
	}
	.date-header .prev:hover,.date-header .next:hover{
		background: transparent;
	}
	.prev{
		b{
			margin-left: 2px;
			border-left-color: transparent;
		}

	}
	.next{
		b{	
			margin-left: 22px;
			border-right-color: transparent;

		}
	}
	.week-content{
		//add for wangqi
		.dow{
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			border-left: none;
			border-right: none;
			margin: 0;
			color: @grayLight;
			font-weight: 600;
		}
	}
	thead tr:first-child th,
	tfoot tr th {
		cursor: pointer;
		&:hover{
			background: @grayLighter;
		}
	}
	// Basic styling for calendar-week cells
	.cw {
		font-size: 10px;
		width: 12px;
		padding: 0 2px 0 5px;
		vertical-align: middle;
	}
	thead tr:first-child th.cw {
		cursor: default;
		background-color: transparent;
	}
	&.dropdown-menu {
	    position: absolute;
	    top: 100%;
	    left: 0;
	    z-index: @zindexDropdown;
	    float: left;
	    display: none; // none by default, but block on "open" of the menu
	    min-width: 160px;
	    list-style: none;
	    padding: 0;
	    background-color: @dropdownBackground;
	    border: 1px solid #ccc;
	    border: 1px solid rgba(0,0,0,.2);
	    .border-radius(0px);
	    .box-shadow(0 5px 10px rgba(0,0,0,.2));
	    -webkit-background-clip: padding-box;
	       -moz-background-clip: padding;
	            background-clip: padding-box;
	    *border-right-width: 2px;
	    *border-bottom-width: 2px;	

	    // Normally inherited from bootstrap's `body`
	    color: #333333;
	    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	    font-size:13px;
	    line-height: @baseLineHeight;
  }
}
